<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 选择课程类别 开始 -->
    <section class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">选择题库</span>
        </h2>
      </header>
      <section class="c-sort-box">
        <!-- 课程类别 begin -->
        <section class="c-s-dl">
          <dl>
            <dt>
              <span class="c-999 fsize14">课程类别</span>
            </dt>
            <dd class="c-s-dl-li">
              <ul class="clearfix">
                <li v-for="(item,index) in subjectNestedList" :key="index">
                  <a 
                    :title="item.title" 
                    href="javascript:void(0);"
                    @click="handleFirstLevelSubject(item)"
                    class="subject-item"
                    :class="{ disabled: !item.children || item.children.length === 0 }"
                  >
                    {{item.title}}
                  </a>
                  <!-- 显示二级分类 -->
                  <ul v-if="item.children && item.children.length > 0" class="sub-subject-list">
                    <li v-for="(subItem, subIndex) in item.children" :key="subIndex">
                      <a
                        :title="subItem.title"
                        href="javascript:void(0);"
                        @click="selectSubject(subItem.id)"
                        class="subject-item sub-item"
                      >
                        {{subItem.title}}
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </dd>
          </dl>
          <div class="clear"/>
        </section>
        <!-- 课程类别 end -->
      </section>
    </section>
    <!-- 选择课程类别 结束 -->
  </div>
</template>

<script>
import courseApi from '@/api/course'

export default {
  data() {
    return {
      subjectNestedList: [] // 一级分类列表（包含二级分类）
    }
  },
  
  created() {
    this.initSubject()
  },

  methods: {
    // 查询所有一级分类
    initSubject() {
      courseApi.getNestedTreeList().then(response => {
        this.subjectNestedList = response.data
      })
    },

    // 处理一级分类点击事件
    handleFirstLevelSubject(item) {
      // 如果一级分类没有子分类，则允许跳转（为了兼容可能的数据结构）
      if (!item.children || item.children.length === 0) {
        this.selectSubject(item.id)
      }
      // 否则不执行任何操作，因为只能选择二级分类
    },

    // 选择课程类别（只能选择二级分类）
    selectSubject(subjectId) {
      // 跳转到刷题页面，传递选中的课程类别ID
      this.$router.push({ path: '/practice/list', query: { subjectId: subjectId } })
    }
  }
}
</script>

<style scoped>
.subject-item {
  display: block;
  padding: 10px 20px;
  margin: 5px;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.subject-item:hover:not(.disabled) {
  background: #00aaff;
  color: #fff;
  border-color: #00aaff;
}

.subject-item.disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.sub-item {
  margin-left: 20px;
  background-color: #f8f8f8;
}

.sub-item:hover {
  background: #00aaff;
}

/* 课程类别样式 */
.c-s-dl {
  margin-top: 20px;
  margin-bottom: 20px;
}

.c-s-dl dl {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.c-s-dl dt {
  width: 100px;
  padding-top: 5px;
}

.c-s-dl dd {
  flex: 1;
}

.c-s-dl dd ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.c-s-dl dd li {
  margin-right: 15px;
  margin-bottom: 10px;
  width: 100%;
}

.sub-subject-list {
  list-style: none;
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
}

.sub-subject-list li {
  margin-right: 10px;
  margin-bottom: 5px;
}

/* 课程类别移动端适配样式 */
@media (max-width: 768px) {
  .c-s-dl dl {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
  }
  
  .c-s-dl dt {
    margin-bottom: 10px;
  }
  
  .c-s-dl dd {
    width: 100%;
  }
  
  .c-s-dl dd ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  
  .c-s-dl dd li {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  
  .subject-item {
    padding: 8px 15px;
    font-size: 14px;
  }
  
  .sub-subject-list {
    padding-left: 15px;
  }
}

@media (max-width: 480px) {
  .c-s-dl dd li {
    margin-right: 5px;
    margin-bottom: 5px;
  }
  
  .subject-item {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .sub-item {
    margin-left: 10px;
  }
  
  .sub-subject-list {
    padding-left: 10px;
  }
}
</style>